<template>
  <div class="content">
    <heading grade='1'>教练管理[共20人]</heading>
    <el-button size="small" @click="handleRouterChange">新增教练</el-button>
    <div class="search-box">
      <el-form class="form-search" label-width="90px">
        <el-form-item label="姓名：">
          <el-input v-model="query.nickName" placeholder="请输入搜索的姓名"></el-input>
        </el-form-item>
        <el-form-item label="证件号：">
          <el-input v-model="query.ip" placeholder="请输入搜索的证件号"></el-input>
        </el-form-item>
        <el-form-item label="联系手机：">
          <el-input v-model="query.mobile" placeholder="请输入搜索的手机号"></el-input>
        </el-form-item>
        <el-button type="primary" class="search-btn" native-type="submit">搜索</el-button>
      </el-form>
    </div>
    <div class="chechbox-style">
      <el-checkbox @change="handleSelection">全选</el-checkbox>
      <el-button @click="handleDelete">删除</el-button>
    </div>
    <el-table ref="multipleTable" :data="tableData" border tooltip-effect="dark" style="width: 100%" 
      :default-sort="{prop: 'date', order: 'descending'}"
      @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="40" align="center">
      </el-table-column>
      <el-table-column label="姓名" width="100" sortable align="center">
        <template scope="scope">{{ scope.row.name }}</template>
      </el-table-column>
      <el-table-column prop="sex" label="性别" align="center">
      </el-table-column>
      <el-table-column prop="age" label="年龄" align="center">
      </el-table-column>
      <el-table-column prop="country" label="国籍" align="center">
      </el-table-column>
      <el-table-column prop="ip" label="证件号码" align="center">
      </el-table-column>
      <el-table-column prop="mobile" label="联系手机" align="center">
      </el-table-column>
      <el-table-column prop="certificate" label="证书" align="center">
      </el-table-column>
      <el-table-column prop="amount" label="授课数量" align="center">
      </el-table-column>
      <el-table-column prop="course" label="授课课程" align="center">
      </el-table-column>
      <el-table-column prop="student" label="学生人数" align="center">
      </el-table-column>
      <el-table-column prop="operate" label="操作" width="145" align="center">
        <template scope="scope">
          <el-button
            size="small"
            @click="handleEdit(scope.$index, scope.row)" type="link">编辑教练信息</el-button>
          <el-button
            size="small"
            @click="handleVacate(scope.$index, scope.row)" type="text">请假</el-button>
          <el-button
            size="small"
            @click="handleCancelVacate(scope.$index, scope.row)" type="text" v-if="isVacate">撤销请假</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="cover"></div>
    <vacate :visible="dialogFormVisible" @visible="hanleChangeVisible"></vacate>
    <!-- <el-pagination
      v-bind="getPaginationProps(employee_list)"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
      >
    </el-pagination> -->
  </div>
</template>

<script>
import { PagingList } from 'utils/mixins'
import vacate from './components/vacate'
export default {
  mixins: [PagingList],
  components: {
    vacate
  },
  data () {
    return {
      nickName: '',
      ip: '',
      mobile: '',
      query: this.getQuery(),
      dialogFormVisible: false,
      tableData: [
        {
          name: '王小虎',
          sex: '男',
          age: '30',
          country: '中国',
          ip: 192353254235462583,
          mobile: 18823654258,
          certificate: '国家一级教练、足球高级裁判',
          amount: 5,
          course: '少儿足球长期培训(A班)',
          student: 150
        },
        {
          name: '王小虎',
          sex: '男',
          age: '30',
          country: '中国',
          ip: 192353254235462583,
          mobile: 18823654258,
          certificate: '国家一级教练、足球高级裁判',
          amount: 5,
          course: '少儿足球长期培训(A班)',
          student: 150
        },
        {
          name: '王小虎',
          sex: '男',
          age: '30',
          country: '中国',
          ip: 192353254235462583,
          mobile: 18823654258,
          certificate: '国家一级教练、足球高级裁判',
          amount: 5,
          course: '少儿足球长期培训(A班)',
          student: 150
        }
      ],
      multipleSelection: [],
      isVacate: true
    }
  },
  methods: {
    handleRouterChange () {
      console.log('跳转到新增教练页面')
    },
    handleSelection () {
      console.log('全选')
      this.tableData.forEach(row => {
        this.$refs.multipleTable.toggleRowSelection(row)
      })
    },
    handleDelete () {
      if (this.multipleSelection.length > 0) {
        console.log(this.multipleSelection)
        this.$confirm('确认删除所选教练吗？', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      } else {
        this.$alert('请勾选要删除的教练', {
          confirmButtonText: '我知道了'
        })
      }
    },
    handleSelectionChange (val) {
      console.log('handleSelectionChange', val)
      this.multipleSelection = val
    },
    handleEdit (index, row) {
      console.log(index, row)
    },
    handleVacate (index, row) {
      console.log(index, row)
      this.dialogFormVisible = true
    },
    handleCancelVacate (index, row) {
      console.log(index, row)
    },
    hanleChangeVisible () {
      this.dialogFormVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  position: relative;
  .heading {
    display: inline-block;
  }
  .search-box {
    .form-search {
      .el-form-item {
        display: inline-block;
      }
      .el-input {
        width: 160px;
      }
      .search-btn {
        margin-left: 10px;
      }
    }
  }
  .chechbox-style {
    margin: 0 0 20px 13px
  }
  .cover {
    width: 25px;
    height: 25px;
    background-color:#fff;
    position: absolute;
    left: 71px;
    top: 250px;
    z-index: 999;
  }
  .el-button--link {
    margin-left: 10px;
    // margin-right: 5px;
  }
}

</style>
